<template>
    <div class="add-message-page">
        <el-card shadow="never" v-loading="loading">
            <el-form
                :model="form"
                ref="form"
                :rules="rules"
                label-position="right"
                label-suffix=":"
                label-width="100px"
                class="w-2/4"
            >
                <el-form-item label="消息标题" prop="title">
                    <el-input
                        placeholder="请输入消息标题"
                        class="input-width"
                        v-model="form.title"
                        maxlength="30"
                        show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="消息副标题" prop="subtitle">
                    <el-input
                    placeholder="请输入消息副标题"
                    class="input-width"
                    v-model="form.subtitle"
                    maxlength="30"
                    show-word-limit/>
                </el-form-item>
                <el-form-item label="消息类型" prop="type">
                    <el-select
                    v-model="form.type"
                    placeholder="请选择消息类型"
                    @change="handleSelect">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择工作场景学习内容" v-show="form.type === 2">
                    <el-button type="primary" @click="getCourse">{{ "选择工作场景学习内容" }}</el-button>
                    <course-list
                        v-show="targets.length > 0 && form.type === 2"
                        :list="targets"
                        @delete="deleteCourse"></course-list>
                </el-form-item>
                <el-form-item label="选择课程节点" v-show="form.type === 3">
                    <el-button type="primary" @click="getSection">{{ "选择课程节点" }}</el-button>
                    <course-list
                        v-show="targets.length > 0 && form.type === 3"
                        :list="targets"
                        @delete="deleteCourse"/>
                </el-form-item>
                <!-- <el-form-item label="节点ID" v-show="form.type === 3">
                    <el-input
                        placeholder="请输入节点ID"
                        type="number"
                        class="input-width"
                        v-model="form.target_id"
                    ></el-input>
                </el-form-item> -->
                <el-form-item label="描述" v-show="form.type !== 4">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 6}"
                        placeholder="请输入内容"
                        v-model="form.describe"
                    ></el-input>
                </el-form-item>
                <el-form-item label="富文本" v-show="form.type === 4">
                    <tinymce v-model="form.content"></tinymce>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onClickConfirm()">保 存</el-button>
                    <el-button @click="onReturn">返 回</el-button>
                </el-form-item>
                <course-dialog ref="course" :studyId="form.target_id" @addCourse="addCourseHandle"/>
                <section-dialog ref="section" :studyId="form.target_id" @addSection="addSectionHandle"/>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import Tinymce from '@/components/base/Tinymce';
import CourseDialog from '@/components/dialog/CourseDialog';
import CourseList from '@/components/page/CourseList';
import SectionDialog from '@/components/dialog/SectionDialog';

export default {
    components: {
        Tinymce,
        CourseDialog,
        CourseList,
        SectionDialog,
    },
    data() {
        return {
            form: {
                title: '',
                subtitle: '',
                type: 1,
                target_id: '',
                describe: '',
                content: '',
            },
            rules: {
                title: [{ required: true, message: '消息标题不能为空', trigger: 'blur' }],
                subtitle: [{ required: true, message: '消息副标题不能为空', trigger: 'blur' }],
                type: [{ required: true, message: '消息类型不能为空', trigger: 'blur' }],
            },
            isMeet: false,
            loading: false,
            options: [{
                value: 1,
                label: '无跳转',
            }, {
                value: 2,
                label: '跳转学习主题',
            }, {
                value: 3,
                label: '跳转节点',
            }, {
                value: 4,
                label: '富文本',
            }],
            targets: [],
        };
    },
    methods: {
        onClickConfirm() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;
                if (this.form.type === 2 || this.form.type === 3) {
                    if (this.form.target_id === '') {
                        $ele.$message.error('消息跳转内容不能为空');
                        return;
                    }
                }
                const url = this.$route.query.id ? `message/${this.$route.query.id}` : 'message';
                API[this.$route.query.id ? 'put' : 'post'](url, this.form).then(() => {
                    $ele.$message.success(this.$route.query.id ? '修改成功' : '保存成功');
                    this.$router.go(-1);
                });
            });
        },
        async fetchData() {
            this.loading = true;
            this.form = await API.get(`message/${this.$route.query.id}`);
            if (this.form.type === 2) {
                const course = await API.get(`course/${this.form.target_id}`);
                if (course != null) {
                    this.targets.push(course);
                }
            }
            if (this.form.type === 3) {
                const section = await API.get(`section/${this.form.target_id}`);
                if (section != null) {
                    this.targets.push(section);
                }
            }
            this.loading = false;
        },
        getCourse() {
            this.$refs.course.open();
        },
        getSection() {
            this.$refs.section.open();
        },
        deleteCourse() {
            this.targets = [];
            this.form.target_id = '';
        },
        addCourseHandle(course) {
            this.targets = [];
            this.targets.push(course);
            this.form.target_id = course.id;
            $ele.$message.success('选择成功');
            this.$refs.course.close();
        },
        addSectionHandle(section) {
            this.targets = [];
            this.targets.push(section);
            this.form.target_id = section.id;
            $ele.$message.success('选择成功');
            this.$refs.section.close();
        },
        handleSelect() {
            this.targets = [];
            this.form.target_id = '';
        },
        onReturn() {
            this.$router.go(-1);
        },
    },
    mounted() {
        if (this.$route.query.id) this.fetchData();
    },
};
</script>

<style lang="scss" scpoe>
.add-message-page {
    .el-select {
        width: 100%;
    }
}
</style>
